<template>
  <div>
    <el-upload
      accept=".jpg,.png,.jpeg"
      action="http://gwy-oss.oss-cn-shenzhen.aliyuncs.com"
      :data="dataObj"
      ref="upload"
      list-type="picture-card"
      :file-list="originFileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :on-change="handleChange"
      :limit="maxCount"
      :on-exceed="handleExceed"
      :multiple="true"
      :auto-upload="false"
      :on-success="handleSuccess"
      :on-error="handleUploadError"
    >
      <i class="  el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body="true" style="left:25%;width: 50%;text-align: center">
      <img style="" width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <div style="margin-top: 1%">
      <el-button v-if="showButton" @click="submitUpload">上传</el-button>
<!--      <el-button @click="clickSave">保存</el-button>-->
    </div>

  </div>
</template>
<script>

import {getUUID} from '../../utils/uuid'
export default {
  name: "multiUpload",
  props: {
    //图片属性数组
    value: {
      Array,
      default: ''
    },
    //最大上传图片数量
    maxCount: {
      type: Number,
      default: 15,
    },
    showButton:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
        uuid: "",
      },
      dialogVisible: false,
      dialogImageUrl: null,
      fileLists:[],
      upLoadLists:[]
    };
  },
  computed: {
    originFileList() {
      //将原有图片数据回显
      let fileList = [];
      if (this.value !== ''){
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({ url: this.value[i] });
        }
      }
      // fileList.push({url:"https://gwy-oss.oss-cn-shenzhen.aliyuncs.com/2021-12-04/4e8de6bee29441999ecc4ae2ec2f69d5_312745.jpg"})
      return fileList;
    },
  },
  mounted() {},
  methods: {

    //检测改变
    handleChange(file,fileList){
      this.fileLists = fileList
    },
    //改变删除
    handleRemove(file, fileList) {
      // this.emitInput(fileList);
      this.fileLists = fileList
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    beforeUpload(file) {

    },
    handleSuccess(res,file){
      this.upLoadLists.push(this.dataObj.host+"/"+this.dataObj.key.replaceAll("_${filename}","_"+file.name))
      this.$emit('getPhotos',this.upLoadLists)
      // let a = []
      // this.fileLists.forEach(file =>{
      //   a.push( this.dataObj.host+"/"+this.dataObj.key.replaceAll("_${filename}","_"+file.name))
      // })
      // console.log(a)
    },
    async submitUpload() {
      let _self = this;
      //获取oss访问数据
      await  new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornUrl("/oss/policy"),
          method: "get"
        }).then((res) => {
          let response=res.data
          _self.dataObj.policy = response.data.policy;
          _self.dataObj.signature = response.data.signature;
          _self.dataObj.ossaccessKeyId = response.data.accessid;
          _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
          _self.dataObj.dir = response.data.dir;
          _self.dataObj.host = response.data.host;
          resolve(true);
        })
          .catch((err) => {
            reject(false);
          });
      });
      // console.log(2)
      if (this.fileLists.length === 0){
        this.$message({message:'请选择文件在上传',type:'error',customClass:'zZindex'})
      }
      //提交
      this.$refs.upload.submit()
      // let formData = new FormData();
      //
      // this.fileLists.forEach(file =>{
      //      return formData.append('file',file.raw)
      // })




      // this.fileList.push({
      //   name: file.name,
      //   // url: this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name； 替换${filename}为真正的文件名
      //   url:
      //     this.dataObj.host +
      //     "/" +
      //     this.dataObj.key.replace("${filename}", file.name),
      // });
      // this.emitInput(this.fileList);

    },
    handleExceed(files, fileList) {
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000,
      });
    },
    handleUploadError(res,file){
      this.$message.error(file.name+"传输失败！")

    },
    clickSave(){
      this.$emit('disShow')
    }
  },

};
</script>
<style>
/*遮罩层比重 ---JOJO*/
.zZindex {
  z-index:3000 !important;
}
</style>


